<template>
  <div class="inventory-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>库存管理</h2>
        <p class="subtitle">管理商品库存和库存预警</p>
      </div>
      <div class="header-right">
        <a-space>
          <a-button type="primary" @click="handleBatchAdjust">
            <template #icon><icon-edit /></template>
            批量调整库存
          </a-button>
          <a-button type="primary" status="warning" @click="handleExport">
            <template #icon><icon-download /></template>
            导出库存报表
          </a-button>
        </a-space>
      </div>
    </div>

    <!-- 库存管理表格 -->
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="searchForm" layout="inline" class="search-form">
        <a-form-item field="keyword" label="商品搜索">
          <a-input
            v-model="searchForm.keyword"
            placeholder="商品名称/编号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="stockWarning" label="库存状态">
          <a-select
            v-model="searchForm.stockWarning"
            placeholder="请选择库存状态"
            allow-clear
          >
            <a-option value="low">库存不足</a-option>
            <a-option value="normal">库存正常</a-option>
            <a-option value="high">库存充足</a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 库存表格 -->
      <a-table
        :loading="loading"
        :data="inventoryList"
        :pagination="pagination"
        :row-selection="rowSelection"
        @page-change="handlePageChange"
      >
        <template #columns>
          <a-table-column title="商品信息">
            <template #cell="{ record }">
              <div class="product-info">
                <a-avatar :size="60" :src="record.image" />
                <div class="product-detail">
                  <div class="product-name">{{ record.name }}</div>
                  <div class="product-code">{{ record.code }}</div>
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="当前库存" data-index="stock">
            <template #cell="{ record }">
              <span :class="getStockClass(record.stock)">{{
                record.stock
              }}</span>
            </template>
          </a-table-column>
          <a-table-column title="预警阈值" data-index="warningThreshold" />
          <a-table-column title="锁定库存" data-index="lockedStock" />
          <a-table-column title="可用库存" data-index="availableStock">
            <template #cell="{ record }">
              {{ record.stock - record.lockedStock }}
            </template>
          </a-table-column>
          <a-table-column title="最近入库" data-index="lastInboundTime" />
          <a-table-column title="最近出库" data-index="lastOutboundTime" />
          <a-table-column title="操作" width="180">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  type="primary"
                  size="small"
                  @click="handleAdjust(record)"
                >
                  调整库存
                </a-button>
                <a-button
                  type="text"
                  size="small"
                  @click="handleHistory(record)"
                >
                  出入库记录
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <!-- 调整库存弹窗 -->
    <a-modal
      v-model:visible="adjustVisible"
      :title="isMultiple ? '批量调整库存' : '调整库存'"
      @ok="handleAdjustConfirm"
      @cancel="adjustVisible = false"
    >
      <a-form :model="adjustForm" layout="vertical">
        <template v-if="!isMultiple">
          <a-form-item field="stock" label="当前库存">
            <a-input-number
              v-model="adjustForm.stock"
              placeholder="请输入库存数量"
            />
          </a-form-item>
          <a-form-item field="warningThreshold" label="预警阈值">
            <a-input-number
              v-model="adjustForm.warningThreshold"
              placeholder="请输入预警阈值"
            />
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item field="adjustType" label="调整方式">
            <a-radio-group v-model="adjustForm.adjustType">
              <a-radio value="increase">增加库存</a-radio>
              <a-radio value="decrease">减少库存</a-radio>
              <a-radio value="set">设置库存</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item field="adjustValue" label="调整数量">
            <a-input-number
              v-model="adjustForm.adjustValue"
              placeholder="请输入调整数量"
            />
          </a-form-item>
        </template>
        <a-form-item field="remark" label="备注">
          <a-textarea
            v-model="adjustForm.remark"
            placeholder="请输入备注信息"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconEdit,
  IconSearch,
  IconRefresh,
  IconDownload,
} from "@arco-design/web-vue/es/icon";

const loading = ref(false);
const adjustVisible = ref(false);
const isMultiple = ref(false);
const selectedRows = ref([]);

// 搜索表单
const searchForm = reactive({
  keyword: "",
  stockWarning: "",
});

// 调整库存表单
const adjustForm = reactive({
  stock: 0,
  warningThreshold: 0,
  adjustType: "increase",
  adjustValue: 0,
  remark: "",
});

// 库存列表数据
const inventoryList = ref([
  {
    id: 1,
    code: "P202403150001",
    name: "特色桂花糕",
    image: "https://example.com/image1.jpg",
    stock: 8,
    warningThreshold: 10,
    lockedStock: 2,
    lastInboundTime: "2024-03-15 12:34:56",
    lastOutboundTime: "2024-03-15 14:23:45",
  },
  // 更多库存数据...
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
});

// 表格选择配置
const rowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onSelect: (selected, record, selectedRows) => {
    selectedRows.value = selectedRows;
  },
  onSelectAll: (selected, selectedRows) => {
    selectedRows.value = selectedRows;
  },
};

// 获取库存状态样式
const getStockClass = (stock) => {
  if (stock <= 0) return "stock-empty";
  if (stock <= 10) return "stock-warning";
  return "stock-normal";
};

// 处理搜索
const handleSearch = () => {
  loading.value = true;
  // TODO: 调用搜索API
  setTimeout(() => {
    loading.value = false;
    Message.success("搜索成功");
  }, 1000);
};

// 处理重置
const handleReset = () => {
  searchForm.keyword = "";
  searchForm.stockWarning = "";
  handleSearch();
};

// 处理分页
const handlePageChange = (page) => {
  pagination.current = page;
  handleSearch();
};

// 导出库存报表
const handleExport = () => {
  Message.success("开始导出库存报表");
};

// 批量调整库存
const handleBatchAdjust = () => {
  if (selectedRows.value.length === 0) {
    Message.warning("请先选择要调整的商品");
    return;
  }
  isMultiple.value = true;
  adjustVisible.value = true;
};

// 调整单个商品库存
const handleAdjust = (record) => {
  isMultiple.value = false;
  adjustForm.stock = record.stock;
  adjustForm.warningThreshold = record.warningThreshold;
  adjustForm.remark = "";
  adjustVisible.value = true;
};

// 确认调整库存
const handleAdjustConfirm = () => {
  if (isMultiple.value) {
    if (!adjustForm.adjustValue) {
      Message.error("请输入调整数量");
      return;
    }
    // TODO: 调用批量调整库存API
    Message.success("批量调整库存成功");
  } else {
    if (!adjustForm.stock) {
      Message.error("请输入库存数量");
      return;
    }
    // TODO: 调用调整库存API
    Message.success("调整库存成功");
  }

  adjustVisible.value = false;
  handleSearch();
};

// 查看出入库记录
const handleHistory = (record) => {
  // TODO: 实现查看出入库记录功能
  Message.info("查看出入库记录");
};
</script>

<style lang="scss" scoped>
.inventory-page {
  .page-header {
    @apply flex items-center justify-between mb-6;

    h2 {
      @apply text-xl font-medium mb-1;
    }

    .subtitle {
      @apply text-gray-500 text-sm;
    }
  }

  .search-form {
    @apply mb-4;
  }

  .product-info {
    @apply flex items-center;

    .product-detail {
      @apply ml-3;

      .product-name {
        @apply font-medium mb-1;
      }

      .product-code {
        @apply text-gray-500 text-sm;
      }
    }
  }

  .stock-empty {
    @apply text-red-500;
  }

  .stock-warning {
    @apply text-orange-500;
  }

  .stock-normal {
    @apply text-green-500;
  }
}
</style>
